﻿@model  Blog_MODEL.BlogArticle
@{
    Layout = "~/Views/Shared/ShowShared.cshtml";
    ViewBag.Title = "周黎的个人博客-一个热爱写代码的90后程序员";
    ViewBag.BlogTitle = "周黎的个人博客-一个热爱写代码的90后程序员";
    ViewBag.activeid = "sy";
    ViewBag.keywords = "个人博客,周黎个人博客,周黎,.NET,技术交流,zhouli";
}
@*@section search{

        <div class="w_search">
            <div class="w_searchbox">
                <input type="text" placeholder="关键字" id="SearchBlog" />
                <button onclick="search()">搜索</button>
            </div>
        </div>
    }*@
<a href="javascript:void(0)" style="position: fixed;
    bottom: 10px;
    left:20px;
    z-index: 999;
    display: none;
    font-size: 16px;
    cursor: pointer;
    overflow: hidden;
    visibility: visible;
    color: #9c9c9c;
    font-size: 16px;
    width: 150px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    _position: absolute;
    _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);display:block">
    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1273513286'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1273513286%26online%3D2' type='text/javascript'%3E%3C/script%3E"));</script>
</a>
<div class="w_container">
    <div class="container">
        <div class="row w_main_row">
            <div class="col-lg-9 col-md-9 w_main_left">
                <!--滚动图开始-->
                <div class="panel panel-default">

                    <div id="w_carousel" class="carousel slide w_carousel" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#w_carousel" data-slide-to="0" class="active"></li>
                            <li data-target="#w_carousel" data-slide-to="1"></li>
                            <li data-target="#w_carousel" data-slide-to="2"></li>
                            <li data-target="#w_carousel" data-slide-to="3"></li>
                        </ol>
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="~/Content/Frontdesk/img/slider/slide1.jpg" alt="当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。">
                                <div class="carousel-caption">
                                    <h3></h3>
                                    <p>当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="~/Content/Frontdesk/img/slider/slide2.jpg" alt="努力不一定成功，但放弃一定失败只有学会如何停下来的人，才懂加速。">
                                <div class="carousel-caption">努力不一定成功，但放弃一定失败只有学会如何停下来的人，才懂加速。</div>
                            </div>
                            <div class="item">
                                <img src="~/Content/Frontdesk/img/slider/slide3.jpg" alt="如果不坚持、如果不努力，再牛逼的现在也终将销声匿迹。">
                                <div class="carousel-caption">如果不坚持、如果不努力，再牛逼的现在也终将销声匿迹。</div>
                            </div>
                            <div class="item">
                                <img src="~/Content/Frontdesk/img/slider/slide4.jpg" alt="用一颗浏览的心，去看待人生，一切的得与失、隐与显，都是风景与风情。">
                                <div class="carousel-caption">用一颗浏览的心，去看待人生，一切的得与失、隐与显，都是风景与风情。</div>
                            </div>
                        </div>
                        <!-- Controls -->
                        <a class="left carousel-control" href="#w_carousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#w_carousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>

                </div>
                <div class="panel panel-default contenttop" id="contentList_zhiding">
                    <a href="/Home/show/@Model.Id" target="_blank">
                        <strong>博主置顶</strong>
                        <h3 class="title">@Model.BlogArticleTitle</h3>
                        <p class="overView">@Model.BlogArticleBody</p>
                    </a>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">最新发布</h3>
                    </div>
                    <div class="panel-body">
                        <!--文章列表开始-->
                        <script id="cy_cmt_num" src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId=cytyPBtWx">
                        </script>
                        <div class="contentList" id="contentList">
                            @*<div class="panel panel-default">
                                    <div class="panel-body">
                                        <h4><a class="title" href="http://www.17sucai.com/pins/demo-show?id=27764">wfyvv.com</a></h4>
                                        <p>
                                            <a class="label label-default">UUID</a>
                                            <a class="label label-default">java</a>s
                                        </p>
                                        <p class="overView">个人网站正在建设中。。。</p>
                                        <p><span class="count"><i class="glyphicon glyphicon-user"></i><a href="#">admin</a></span> <span class="count"><i class="glyphicon glyphicon-eye-open"></i>阅读:666</span><span class="count"><i class="glyphicon glyphicon-comment"></i>评论:18</span><span class="count"><i class="glyphicon glyphicon-time"></i>2017-02-07</span></p>

                                    </div>
                                </div>*@
                            @*<div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="contentleft">
                                            <h4><a class="title" href="article_detail.html">使用 Nginx 实现 tomcat、glassfish 等 web 服务器负载均衡</a></h4>
                                            <p>
                                                <a class="label label-default">Nginx</a>
                                                <a class="label label-default">tomcat负载均衡</a>
                                            </p>
                                            <p class="overView">1.web服务器负载均衡简介web服务器负载均衡是指将多台可用单节点服务器组合成web服务器集群，然后通过负载均衡器将客户端请求均匀的转发到不同的单节点web服务器上，从而增加整个web服务器集群的吞吐量。</p>
                                            <p><span class="count"><i class="glyphicon glyphicon-user"></i><a href="#">admin</a></span> <span class="count"><i class="glyphicon glyphicon-eye-open"></i>阅读:1003</span><span class="count"><i class="glyphicon glyphicon-comment"></i>评论:2</span><span class="count"><i class="glyphicon glyphicon-time"></i>2017-01-16</span></p>
                                        </div>
                                        <div class="contentImage">
                                            <div class="row">
                                                <a href="#" class="thumbnail w_thumbnail">
                                                    <img src="~/Content/Frontdesk/img/slider/Aj6bieY.jpg" alt="...">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>*@
                        </div>
                        <div style="text-align:center" id="j_loadmore">努力加载中...</div>
                        <!--文章列表结束-->
                    </div>
                </div>
            </div>
            <!--右侧开始-->
            @{Html.RenderAction("left");}

        </div>
    </div>
</div>

<script type="text/javascript">
    var $backToTopEle = $('<a href="javascript:void(0)" class="Hui-iconfont toTop" title="返回顶部" alt="返回顶部" style="display:none">↑</a>').appendTo($("body")).click(function () {
        $("html, body").animate({ scrollTop: 0 }, 120);
    });
    var backToTopFun = function () {
        var st = $(document).scrollTop(),
            winh = $(window).height();
        (st > 0) ? $backToTopEle.show() : $backToTopEle.hide();
        /*IE6下的定位*/
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }

    };
    var stop = true;//是否开启滚动监听
    var PageIndex = 1;//第几页
    var PageSize = 5;//每页多少条
    $(function () {
        console.log(getQueryString('searchblog'));
        var SearchBlog = getQueryString('searchblog') == null ? '' : getQueryString('searchblog')
        $('#SearchBlog').val(SearchBlog);
        $(window).on("scroll", function () {
            backToTopFun();
            ScrollLoading();
        });
        backToTopFun();
        getData();

    });

    //滚动加载方法
    function ScrollLoading() {
        var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
        if ($(document).height() <= totalheight) {
            if (stop == true) {
                stop = false;
                $('#j_loadmore').html('正在加载中...');
                $('#j_loadmore').show();
                getData();
            }
        }
    }
    function search() {
        var SearchBlog = $('#SearchBlog').val();
        location.href = "/Home/Index?searchblog=" + SearchBlog;

    }
    function getData(BlogLable) {
        var html = '';
        var pageData = {
            PageIndex: PageIndex,
            PageSize: PageSize,
            searchblog: getQueryString('searchblog') == null ? '' : getQueryString('searchblog'),
            bloglablebh: getQueryString('bloglablebh') == null ? '' : getQueryString('bloglablebh')
        }
        $.get("/Home/getBlogArticleData", pageData, function (data, status) {
            var jsonData = JSON.parse(data);
            if (jsonData.StateCode == 200) {
                stop = true;
                var data = JSON.parse(jsonData.JsonData);
                //  console.log("一共" + data.count + "条,当前第" + PageIndex + "页");
                $('#j_loadmore').hide();
                if (data.data.length == 0) {
                    $('#j_loadmore').html('没有更多数据了');
                    $('#j_loadmore').show();
                }
                for (v in data.data) {
                    html += getHtml(data.data[v]);
                }
                $('#contentList').append(html);
                PageIndex++;//加载成功页数加1
            }
            else {
                $('#contentList').append('数据请求异常');
                console.log(jsonData.Messages);
            }
        });
        
    }
    function getHtml(data) {
        var BlogLableNames = data.BlogLableNames.split(',');
        // console.log(data);
        var Html = "";
        if (data != undefined || data != null) {
            Html += '<div class="panel panel-default">' +
'                                    <div class="panel-body">' +
'                                        <div class="contentleft">' +
'                                            <h4><a class="title" href="/Home/show/' + data.Id + '" target="_blank">' + data.BlogArticleTitle + '</a></h4>' +
'                                    <p>' + getBlogLableNameHtml(BlogLableNames) + '</p>' +
            '                                    <p class="overView">' + data.BlogArticleBody + '</p>' +
            '                                    <p><span class="count"><i class="glyphicon glyphicon-eye-open"></i>' +
            '阅读:' + data.BlogArticleBrowsingNum + '</span><span class="count"><i class="glyphicon glyphicon-comment"></i>' +
            '评论:' + data.BlogArticleCommentNum + '</span><span class="count"><i class="glyphicon glyphicon-time"></i>' +
            '' + data.BlogArticleCreateTime + '</span></p>' +
'                                        </div>' +
'                                        <div class="contentImage">' +
'                                            <div class="row">' +
'                                                <a href="/Home/show/' + data.Id + '" class="thumbnail w_thumbnail"  target="_blank">' +
'                                                    <img src="' + data.BlogImg + '" alt="...">' +
'                                                </a>' +
'                                            </div>' +
'                                        </div>' +
'                                    </div>' +
'                                </div>';
        }
        return Html;
    }
    function getBlogLableNameHtml(data) {
        var Html = "";
        for (v in data) {
            Html += ' <a class="label label-default">' + data[v] + '</a>';
        }
        return Html;
    }
    function HTMLEncode(html) {
        var temp = document.createElement("div");
        temp.innerHTML = html;
        var output = temp.innerText;
        return output;
    }
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]); return null;
    }
</script>
